import React,{useState,useEffect} from 'react'
import { NavBar, Space, Tabs } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { MoreOutline, SearchOutline } from 'antd-mobile-icons'
import axios from 'axios';

export default function Personalhomepage() {
    let navigate = useNavigate()
    let [key, setkey] = useState("dynamic")
    let [obj, setobj] = useState({})
    useEffect(() => {
        get_id()
        getlist()
        getlist1()
    }, [])
    let get_id = async () => {
        let id = localStorage.getItem("user_id")
        let { data } = await axios.get("http://127.0.0.1:3000/getuset_id?id=" + id)
        if (data.obj.name == "无") {
            data.obj.name = '用户' + id.slice(id.length - 4)
        }
        setobj(data.obj)
    }
    const [list1,setlist1]=useState([])
    const [list, setlist] = useState([])
    const getlist = async () => {
        let { data } = await axios.get('http://localhost:3000/getlist')
        let datalist = data.list.filter(i => i.collect == true)
        setlist(datalist)
    }
    const getlist1=async()=>{
        let {data}=await axios.get('http://localhost:3000/getrun')
        let datalist = data.list.filter(i => i.collect == true)
        setlist1(datalist)
      }
    return (
        <div>
            <div style={{ height: "160px", backgroundSize: "100%", color: "white", backgroundImage: "url(https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-thumb.jpg)" }}>
                <NavBar right={<div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <SearchOutline />
                        <MoreOutline />
                    </Space>
                </div>} onBack={() => { navigate(-1) }}>
                </NavBar>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <img style={{ width: "100px", height: "100px", borderRadius: "50%", border: "2px solid white", position: "relative", top: "-20px", left: "20px" }} src={obj.img} alt="" />
                <div style={{ width: "60vw", display: "flex", justifyContent: "space-around", textAlign: "center", margin: "20px" }}>
                    <div>
                        <p style={{ fontSize: "18px", fontWeight: "700" }}>0</p>
                        <p>关注</p>
                    </div>
                    <div>
                        <p style={{ fontSize: "18px", fontWeight: "700" }}>0</p>
                        <p>粉丝</p>
                    </div>
                    <div>
                        <p style={{ fontSize: "18px", fontWeight: "700" }}>0</p>
                        <p>点赞</p>
                    </div>
                </div>
            </div>
            <div style={{ boxSizing: "border-box", padding: "0 20px" }}>
                <h2>{obj.name}</h2>
                <p style={{ padding: "10px 0" }}>{obj.test}</p>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                    <p>男 | 来自: {obj.address}</p>
                    <button onClick={() => { navigate("/Personalinformation") }} style={{ border: "2px solid #5cd697", color: "#5cd697", borderRadius: "20px", background: "white", padding: "2px 10px" }}>个人资料</button>
                </div>
            </div>
            <div style={{ marginTop: "20px" }}>
                <Tabs onChange={(e) => { setkey(e) }}>
                    <Tabs.Tab title='动态' key='dynamic'></Tabs.Tab>
                    <Tabs.Tab title='群聊' key='Groupchat'></Tabs.Tab>
                    <Tabs.Tab title='一起跑' key='Runtogether'></Tabs.Tab>
                </Tabs>
            </div>
            <div style={{ background: "#f7f7f7", minHeight: "calc(100vh - 414px)" }}>
                {key == "dynamic" ?
                    <div>
                        <div style={{ boxSizing: "border-box", padding: "10px" }}>
                            全部动态(4)
                            <div style={{ width: '100%', height: "calc(100vh - 112px)" }}>
                            {list.map(item => {
                                return <div key={item._id} onClick={() => {
                                    navigate(`/app/dan/${item._id}`)
                                }} style={{
                                    width: '38%', height: '230px', display: 'inline-block', margin: '15px'
                                    , backgroundColor: 'white', paddingBottom: "5px", paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px'

                                }}>
                                    <p ><img src={item.img} style={{ width: '100%', borderTopLeftRadius: '10px', borderTopRightRadius: '10px', height: '100%' }}></img></p>
                                    <p>{item.test}</p>
                                    <p style={{ marginTop: '16px' }}>
                                        <img src={obj.img} style={{ width: '20px', float: 'left', height: '20px', borderRadius: '50%' }}></img>
                                        <span>{obj.name}</span>
                                        <span style={{ float: 'right' }}>{item.praisenum}{item.praise ? "👍" :
                                            <img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E5%8A%A8%E6%80%81%E8%AF%A6%E6%83%85/u332.svg'></img>
                                        }</span>
                                    </p>

                                </div>
                            })}
                        </div>
                        </div>
                        
                    </div>
                    : ""}
                {key == "Groupchat" ?
                    <div>
                        <div style={{ boxSizing: "border-box", padding: "10px" }}>
                            全部参与群聊(0)
                        </div>

                    </div>
                    : ""}
                {key == "Runtogether" ?
                    <div>
                        <div style={{ boxSizing: "border-box", padding: "10px" }}>
                            全部一起跑(0)
                        </div>

                    </div>
                    : ""}
            </div>
        </div>
    )
}